<!--
 * @Author: modefy
 * @Date: 2023-04-27 10:22:22
 * @LastEditors: ZN
 * @LastEditTime: 2023-05-09 13:37:28
 * @Description: Description
-->
<template>
  <div class="tourism-container">
    <div class="legend">
      <div class="item" v-for="(item, index) in datas" :key="index">
        <div class="top">第{{ index + 1 }}站</div>
        <div class="bottom">
          <div class="left">{{ item.label }}</div>
          <div class="line"></div>
          <div class="right">{{ item.to }}</div>
        </div>
      </div>
    </div>
    <div id="map" :style="{ width: 1657 + 'px', height: 700 + 'px' }"></div>
  </div>
</template>

<script setup lang="ts">
import { color } from "echarts";
import { onMounted, ref } from "vue";
import { getKnowList } from "@/service/scenicSpot/scenicSpot";

const BMap = (window as any).BMap;
const marker: any = ref({});
const datas: any = ref([]);

// 初始化百度地图
const initMap = () => {
  const map = new BMap.Map("map");
  let point = new BMap.Point(117.14304477508644, 36.68259893568496);
  map.centerAndZoom(point, 14);
  map.enableScrollWheelZoom(true);
  map.addEventListener("click", function (e: any) {
    console.log("点击的经纬度：" + e.point.lng + "," + e.point.lat);
  });
  getPositionAddPoint(map, point);
};

const getScenicLineConfig = (map: any) => {
  datas.value.forEach((item) => {
    createLine(map, item.coordinates, item.color);
  });
};

// 创建线路
const createLine = (map: any, coordinates: any, color: string) => {
  const polyline = new BMap.Polyline(
    [new BMap.Point(...coordinates[0]), new BMap.Point(...coordinates[1])],
    { strokeColor: color, strokeWeight: 2, strokeOpacity: 0.9 }
  );
  map.addOverlay(polyline);
};

// 创建对应经纬度的点
const getPositionAddPoint = (map: any, point: Array<number>) => {
  marker.value = new BMap.Marker(point);
  map.addOverlay(marker.value);
  getScenicLineConfig(map);
};

const getData = async () => {
  datas.value = await getKnowList();
  initMap();
};

onMounted(async () => {
  getData();
});
</script>

<style lang="scss" scoped>
.tourism-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  padding: 10px;
  box-sizing: border-box;
  .legend {
    width: 100%;
    height: 70px;
    padding: 17px 6px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .top {
        width: 210px;
        margin-bottom: 10px;
        font-size: 15px;
        text-align: center;
      }

      .bottom {
        width: 210px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .line {
          width: 50px;
          height: 60px;
          background-image: url("@/assets/images/arrow.png");
          background-size: 100% 100%;
          margin: 0 10px;
          position: absolute;
          left: 69px;
        }

        .left,
        .right {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
